<template>
	<view class="container">
		
		<view class="title"> 
		{{onePayCode ? '创建支付密码' : (type == 1 ? '修改密码' : (type == 2 ? '设置支付密码' : '设置支付密码'))}} 
		</view>
		<view class="subtitle">
		{{onePayCode ? (type == 3 ? '请再次填写以确认' : '请创建支付密码，用于支付验证' ) : (type == 1 ? '输入支付密码，以验证身份' : (type == 2 ? '请设置支付密码，用于支付验证' : (type == 3 ? '请再次填写以确认' : '')))}}  
		</view>

		
		<view class="pay-code-box">
			<view class="pay-code"> {{payCode.length > 0 ? '*' : ''}} </view>
			<view class="pay-code"> {{payCode.length > 1 ? '*' : ''}} </view>
			<view class="pay-code"> {{payCode.length > 2 ? '*' : ''}} </view>
			<view class="pay-code"> {{payCode.length > 3 ? '*' : ''}} </view>
			<view class="pay-code"> {{payCode.length > 4 ? '*' : ''}} </view>
			<view class="pay-code"> {{payCode.length > 5 ? '*' : ''}} </view>
		</view>
		<view v-if="onePayCode ? false : true" class="forgetTiele" @click="jump()"> 忘记支付密码 </view>
		
		<view class="keyboard-box">
			<view class="keyboard">
				<view class="key" @click="inputV(1)"> 1 </view>
				<view class="key" @click="inputV(2)"> 2 </view>
				<view class="key" @click="inputV(3)" style="border-right: 0;"> 3 </view>
			</view>
			<view class="keyboard">
				<view class="key" @click="inputV(4)"> 4 </view>
				<view class="key" @click="inputV(5)"> 5 </view>
				<view class="key" @click="inputV(6)" style="border-right: 0;"> 6 </view>
			</view>
			<view class="keyboard">
				<view class="key" @click="inputV(7)"> 7 </view>
				<view class="key" @click="inputV(8)"> 8 </view>
				<view class="key" @click="inputV(9)" style="border-right: 0;"> 9 </view>
			</view>
			<view class="keyboard-buttom">
				<view class="key-null">  </view>
				<view class="key" @click="inputV(0)"> 0 </view>
				<view class="key-del" @click="delInput()" style="border-right: 0;">
					<image class="del-ioc" src="../../static/img/deleteInput.png" mode=""></image>
				</view>
			</view>
		</view>
			

		

	</view>
</template>

<script>
import serve from '../../static/request.js';
import storage from '../../static/appkey.js';
import common from '../../static/jump.js';
export default {
	data() {
		return {
			//是否是第一次创建支付密码
			onePayCode: false,
			// 1:确认密码，2:修改密码，3:再次确认密码
			type: 1,
			payCode: '',
			againPayCode: '',
			subtitle: '输入支付密码，以验证身份',
			// subtitle: '设置支付密码，用于支付验证',
		}
	},
	//第一次加载
	created() {
        const _this = this;
	},
	onShow(){
		
	},
	onLoad() {
		// this.loadData();
	},
	methods: {
		inputV(val){
			if(this.payCode.length < 6){
				this.payCode += val;
				if(this.payCode.length == 6){
					// 判断是否为创建密码
					if(this.onePayCode){
						if(this.type == 1){
							this.againPayCode = this.payCode;
							this.payCode = '';
							this.type = 3;
						}else if(this.type == 3){
							if(this.payCode == this.againPayCode){
								console.log('创建成功！' + this.payCode);
							}else{
								uni.showToast({title: '填写支付密码不一致',icon: 'none',})
								this.againPayCode = '';
								this.payCode = '';
								this.type = 1;
							}
						}
					}else{
						if(this.type == 1){
							/* 在这调接口验证支付密码是否正确 */
							if(1){
								this.payCode = '';
								this.againPayCode = '';
								this.type = 2;
							}
						}else if(this.type == 2){
							this.againPayCode = this.payCode;
							this.payCode = '';
							this.type = 3;
						}else if(this.type == 3){
							if(this.payCode == this.againPayCode){
								console.log('修改成功！' + this.payCode);
							}else{
								uni.showToast({title: '输入支付密码不一致',icon: 'none',})
								this.againPayCode = '';
								this.payCode = '';
								this.type = 2;
							}
						}
					}
				}
			}
		},
		delInput(){
			if(this.payCode.length > 0){
				this.payCode = this.payCode.substring(0, this.payCode.length - 1)
				console.log(this.payCode)
			}
			
		},
		// 忘记密码
		jump(){
			common.jump('forget_pay_code')
		},
		
		loadData: function() {
			
		},
	},
	/* 下拉刷新 */
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 5e2);
	},
	/* 滑动到底部加载 */
	onReachBottom() {
			
	}
};
</script>

<style lang="scss" scoped>

.container{
	font-size: 32rpx;
	color: #010101;
}

.title{
	width: 100vw;
	    text-align: center;
	    font-size: 42rpx;
	    height: 120rpx;
	    line-height: 120rpx;
	    margin-top: 100rpx;
}
.subtitle{
	width: 100vw;
	    font-size: 36rpx;
	    text-align: center;
	    height: 80rpx;
	    line-height: 80rpx;
}
.pay-code-box{
	    width: 600rpx;
	    margin-left: 75rpx;

	    display: flex;
	    justify-content: space-evenly;
	    align-items: center;
	    margin-top: 140rpx;
}
.pay-code{
	width: 80rpx;
	    height: 80rpx;
	    background: #e8e8e8;
	    text-align: center;
	    line-height: 80rpx;
	    font-size: 40rpx;
	    border-radius: 8rpx;
}

.forgetTiele{
	    width: 100vw;
	    text-align: center;
	    color: #fe827a;
	    margin-top: 100rpx;
}

.keyboard-box{
	width: 100vw;
	    position: fixed;
	    bottom: 0;
	    background: #e8e8e8;
	    border-top: 1px solid #e8e8e8;
	    padding-bottom: 72rpx;
}
.keyboard{
	    display: flex;
	    background: #ffffff;
}
.key{
	    width: 33.33333vw;
	    height: 100rpx;
	    border-right: 1px solid #e8e8e8;
	    background: #ffffff;
	    border-bottom: 1px solid #e8e8e8;
	    display: flex;
	    justify-content: center;
	    align-items: center;
}
.keyboard-buttom{
	display: flex;
	background: #e8e8e8;
}
.key-null{width: 33.33333vw;
    height: 100rpx;}
.key-del{
	background: #e8e8e8;
	width: 33.33333vw;
	    height: 100rpx;
	    border-right: 1px solid #e8e8e8;
	    border-bottom: 1px solid #e8e8e8;
	    display: flex;
	    justify-content: center;
	    align-items: center;
}
.del-ioc{
	width: 40rpx;
	height: 40rpx;
}


</style>
